<template>
	<el-tabs v-model="queryParams.office_place_id" @tab-change="handleChange">
		<template v-for="(item,i) in officeList" :key="'officeList'+i">
			<el-tab-pane :label="item.name" :name="item.id">
				<div class="article-lists">
					<el-card class="!border-none" shadow="never">
						<div>
							<el-button v-perms="['office.conference/configDetail']" type="primary" class="mb-4" @click="handleConfig()">
								<span>会议室通用设置</span>
							</el-button>
							<el-button v-perms="['office.conference/add']" type="primary" class="mb-4" @click="handleAdd()">
								<template #icon>
									<icon name="el-icon-Plus" />
								</template>
								<span>新增会议室</span>
							</el-button>
						</div>
						<el-table size="large" v-loading="pager.loading" :data="pager.lists">
							<el-table-column label="序号(ID)" prop="id" min-width="80" />
							<el-table-column label="名称" prop="name" min-width="160" />
							<el-table-column label="容纳人数" prop="person_num" min-width="160" />
							<el-table-column label="设备" min-width="160">
								<!-- 1:电视 2：投影 3：白板 -->
								<template #default="{ row }">
									<span v-for="(item,index) in row.device_tags" :key="'device_tags'+index">
										<span>{{item==1?'电视':item==2?'投影':item==3?'白板':''}}</span>
										<span v-if="index<row.device_tags.length-1">、</span>
									</span>
								</template>
							</el-table-column>
							<el-table-column label="启用状态" min-width="160">
								<template #default="{ row }">
									<span v-if="row.is_enable == 1">启用</span>
									<span v-if="row.is_enable == 0" style="color:red;">停用</span>
								</template>
							</el-table-column>
							<el-table-column label="操作" width="160" fixed="right">
								<template #default="{ row }">
									<el-button v-perms="['office.conference/edit']" type="primary" link @click="handleEdit(row)">编辑</el-button>
									<el-button v-perms="['office.conference/delete']" type="danger" link @click="handleDelete(row.id)">删除</el-button>
									<el-switch v-perms="['office.conference/updateStatus']" v-model="row.is_enable" :active-value="1" :inactive-value="0" @change="changeStatus($event, row.id)" />
								</template>
							</el-table-column>
						</el-table>
						<div class="flex justify-end mt-4">
							<pagination v-model="pager" @change="getLists" />
						</div>
					</el-card>
				</div>
			</el-tab-pane>
		</template>
		<edit-popup v-if="showEdit" ref="editRef" @success="getLists" @close="showEdit = false" />
		<config-popup v-if="showConfig" ref="configRef" @success="getLists" @close="showConfig = false" />
	</el-tabs>
</template>
<script lang="ts" setup name="officeLists">
	import { officePlacelists } from '@/api/office/officePlace';
	import { officeLists, officeDelete, officeStatus } from '@/api/sharedoffice/sharedoffice';
	import { usePaging } from '@/hooks/usePaging';
	import feedback from '@/utils/feedback';
	import EditPopup from './edit.vue';
	import ConfigPopup from './config.vue';
	// import { shallowRef, ref, onMounted } from 'vue';
	const officeList = ref([]);
	let queryParams = reactive({
		office_place_id: 0
	});
	onMounted(async () => {
		try {
			const data = await officePlacelists({ is_enable: 1, page_no: 1, page_size: 9999 });
			if( data.lists.length>0 ){
				officeList.value = data.lists || [];
				queryParams.office_place_id = officeList.value[0].id;
			}
		} catch (error) {
			console.log(error);
		}
	});
	const handleChange = (val:any) => {
		getLists();
	}
	
	const { pager, getLists, resetPage, resetParams } = usePaging({
		fetchFun: officeLists,
		params: queryParams
	})
	
	const editRef = shallowRef<InstanceType<typeof EditPopup>>();
	const showEdit = ref(false);
	const configRef = shallowRef<InstanceType<typeof ConfigPopup>>();
	const showConfig = ref(false);
	
	const handleAdd = async () => {
	    showEdit.value = true
	    await nextTick()
	    if (queryParams.office_place_id) {
	        editRef.value?.setFormData({
	            office_place_id: queryParams.office_place_id
	        })
	    }
	    editRef.value?.open('add')
	}
	
	const handleEdit = async (data: any) => {
	    showEdit.value = true
	    await nextTick()
	    editRef.value?.open('edit')
	    editRef.value?.getDetail(data)
	}
	
	const handleConfig = async () => {
	    showConfig.value = true
	    await nextTick()
	    configRef.value?.open()
	    configRef.value?.getDetail()
	}
	
	const changeStatus = async (is_enable : any, id : number) => {
		await feedback.confirm(is_enable == 0?"会议室停用之后，用户将不能看到该会议室，是否确认停用？":is_enable == 1?"会议室启用之后，用户可看到会议室进行预订，是否确认启用？":'').then(async()=>{
			try {
				await officeStatus({ id, is_enable })
				getLists()
			} catch (error) {
				getLists()
			}
		}).catch(()=>{
			getLists()
		});
	}

	const handleDelete = async (id : number) => {
		await feedback.confirm('确认删除该会议室？')
		await officeDelete({ id })
		getLists()
	}

	onActivated(() => {
		// getLists()
	})

	// getLists()
	// getOffice()
</script>